<script setup>

import {onMounted, ref , watch} from 'vue'
import { queryPageApi } from '@/api/emps'
const searchEmp=ref({
  name: '',
  gender: '',
  date: [],
  begin: '',
  end: ''
})

const empList=ref([])



//定义分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const size='default'
const disabled = false
const background = true
//侦听searchEmp中的date属性
watch(
  () => searchEmp.value.date,
  (newValue, oldValue) => {
     if(newValue.length == 2){
      searchEmp.value.begin = newValue[0]
      searchEmp.value.end = newValue[1]
     }else {
      searchEmp.value.begin = ''
      searchEmp.value.end = ''
     }
  }
)
const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`)
  currentPage.value = 1
  pageSize.value=val
  handleSearch()
}

const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`)
  currentPage.value = val
  handleSearch()
}





const handleSearch =async () => {

  // // 处理查询逻辑
  let result = await queryPageApi(searchEmp.value.name, searchEmp.value.gender, searchEmp.value.begin, searchEmp.value.end, currentPage.value, pageSize.value)

  empList.value = result.data.rows


  total.value = result.data.total

}
const handleReset = () => {
  // 清空表单
  searchEmp.value = {
    name: '',
    gender: '',
    date: [],
    begin: '',
    end: ''
  }
  handleSearch()
}

onMounted(()=>{
  handleSearch()
})

</script>

<template>

    <h1>员工管理</h1><hr>
  <el-form :inline="true" :model="searchEmp" >
    <el-form-item label="姓名">
      <el-input v-model="searchEmp.name" placeholder="请输入员工姓名"/>
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="searchEmp.gender" placeholder="请选择">
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
      </el-select>
    </el-form-item>

    <el-form-item label="入职日期">

       <el-date-picker 
        v-model="searchEmp.date"
        placeholder="选择日期范围"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      ></el-date-picker>
    </el-form-item>

     <el-form-item>
 
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button >清空</el-button>
    </el-form-item>
  </el-form>

<el-button type="primary">添加员工</el-button>
<el-button type="primary">批量删除</el-button>"

<el-table :data="empList" border style="width: 100%">
  <el-table-column prop="id" label="主键ID" width="120" />
 <el-table-column prop="name" label="姓名" width="120" />
 <el-table-column prop="gender" label="性别" width="120" >
      <template #default="scope">
        <el-tag v-if="scope.row.gender==1">男</el-tag>
        <el-tag v-else>女</el-tag>
      </template>
 </el-table-column>
 <el-table-column prop="image" label="头像" >
    <template #default="scope">
      <el-image :src="scope.row.image" width="100" height="100" />
    </template>
 </el-table-column>
 <el-table-column prop="job" label="职位" >
      <template #default="scope">
        <el-tag v-if="scope.row.job==1">班主任</el-tag>
        <el-tag v-else-if="scope.row.job==2">讲师</el-tag>
        <el-tag v-else-if="scope.row.job==3">学工主管</el-tag>
        <el-tag v-else>其他</el-tag>
      </template>
 </el-table-column>
 <el-table-column prop="salary" label="月薪" ></el-table-column>
 <el-table-column prop="entryDate" label="入职日期" width="180" align="center"></el-table-column>
   <el-table-column prop="depteName" label="部门名称" ></el-table-column>
 <el-table-column fixed="right" label="操作" min-width="120">
  <template #default="scope">
    <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
    <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
  </template>
 </el-table-column>
</el-table>


<div class="pdbox">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
      
</template>

<style scoped>
  .pdbox{
    margin-top:15px
  }
</style>